<template>
	<view class="address-info">
		<view class="flex align item">
			<view class="item-label">姓名</view>
			<input type="text" v-model="consignee" placeholder="名字" />
		</view>
		<view class="flex align item">
			<view class="item-label">手机号</view>
			<input type="number" v-model="phone" placeholder="请输入手机号" />
		</view>
		<view class="">
			<block v-if="previnceId&&cityId&&countyId&&isRevise">
				<k-region :isRevise="isRevise" :previnceId="previnceId" :cityId="cityId" :countyId="countyId" @region="region"></k-region>
			</block>
			<block v-else>
				<k-region @region="region"></k-region>
			</block>
		</view>
		
		<view class="flex align item">
			<view class="item-label">门牌号</view>
			<input type="text" style="flex: 1;" v-model="address" placeholder="详细地址" />
		</view>
		
		<!-- <view class="flex align item border">
			<view class="item-label">邮箱号</view>
			<input type="text" style="flex: 1;" v-model="email" placeholder="开发票使用" />
		</view>
		 -->

		<view class="flex align item-default" @click="isDefault">
			<checkbox class="round red" :checked="is_default === 0 ? false : true" />
			<text style="font-size: 30rpx;">设为默认</text>
		</view>
		<view class="save-btn" @click="addOrEdit">保存地址</view>
	</view>
</template>

<script>
import kRegion from '@/components/k-region/k-region.vue';
export default {
	components: {
		'k-region': kRegion
	},
	data() {
		return {
			is_default: 0,
			consignee: '',
			phone: '',
			address: '',
			email: '',
			option: {},
			id: '',
			detail: '',
			previnceId: '',
			cityId: '',
			countyId: '',
			isRevise: true,
			addressInfo: '',
			addressName: '',
			lat: '',
			lng: '',
		};
	},
	onLoad(opt) {
		// if(!opt.id){
		// 	this.isRevise = false;
		// 	return
		// }
		// this.isRevise = true;
		// this.id = opt.id;
		// this.getAddressDetail()
	},
	computed: {
		watchData(){
			const {detail} = this
			if(detail){
				this.isRevise = true;
				this.previnceId = parseInt(detail.province_id);
				this.cityId = parseInt(detail.city_id);
				this.countyId = parseInt(detail.area_id);
				this.consignee = detail.consignee;
				this.phone = detail.phone;
				this.address = detail.address;
				this.is_default = parseInt(detail.is_default);
			}
		}
	},
	methods: {
		region(e) {
			this.option = e;
		},
		isDefault() {
			if (this.is_default === 0) {
				this.is_default = 1;
			} else {
				this.is_default = 0;
			}
		},
		addOrEdit() {
			
		},
		async getAddressDetail(){
			const {id} = this
			await this.$api.post('member/addressinfo',{id}).then(res => {
				this.detail = res.data
				this.option = {
					area_id: res.data.area_id,
					area_name: res.data.area_name,
					city_id: res.data.city_id,
					city_name: res.data.city_name,
					province_id: res.data.province_id,
					province_name: res.data.province_name
				}
			})
		},
		choose(){
			uni.chooseLocation({
				success: (res) => {
					console.log('选择地址',res);
					this.addressInfo = res.address;
					this.lat = res.latitude;
					this.lng = res.longitude;
					this.addressName = res.name;
				}
			})
		}
	}
};
</script>

<style>
page {
	background-color: #F7F7F7;
	font-size: 27rpx;
}
</style>

<style lang="scss" scoped>
	.address-info {
		margin: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.border {
		border-radius: 0 0 20rpx 20rpx;
	}
.flex {
	background-color: #fff;
}
.item {
	// border-top: 1rpx solid #eee;
	padding: 30rpx;
	.item-label {
		min-width: 160rpx;
	}
}

.item-default {
	margin: 20rpx 0;
	border-top: none;
	padding: 30rpx 20rpx;
	font-size: 27rpx;
	color: #999999;
	background-color: #F7F7F7;
}
.save-btn {
	background-color: #41644A;
	color: #fff;
	width: 95%;
	padding: 25rpx 0;
	margin: 0 auto;
	border-radius: 15rpx;
	text-align: center;
	margin-top: 96rpx;
	font-size: 32rpx;
}
</style>